html body {
	/* COLOR VALUES */
	--red-1: #aa1e23;
	--red-2: #f03c4b;
	--red-3: #fac8c8;
	--yellow-1: #fef9ee;
	--gray-1: #ccc;
	--gray-2: #aaa;
	--gray-3: #888;

	/* MEDAL COLORS */
	--gold: #fee101;
	--silver: #d7d7d7;
	--bronze: #c59672;
	--gold-text: black;
	--silver-text: black;
	--bronze-text: #000000;

	/* Theme color and proper text overlay */
	--color-accent: var(--red-2);
	--color-accent-text: white;

	--color-font: #222222;

	/* The main page BG, on the margins of the quiz */
	--color-background: var(--yellow-1);

	/* FOR SOME UW X-COMPATIBILITY */
	--font-color: var(--color-font);

	/* Our font choices. Probably duplicative of UW, but we can control them. */
	--fonts-sans-serif: "Unify Sans", Helvetica, Arial, sans-serif;
	--fonts-serif: "Georgia Pro", Georgia, "Droid Serif", serif;
	--font-size-body: 16px;
	--section-padding: 30px;

	/* For placing fixed things. We might want to alter this CSS based on the presence or nonpresence of the nav on the page */
	--roster-nav-height: 55px;

	/* Zs */
	--z-filters: 10;

	/* Generic var to make buttons the proper size */
	--touch-target: 44px;

	/* INTRO TRANSITION DURATION */
	--transition-duration-intro: 400ms;

	/* FEATURED ATHLETES */
	--color-background-featured: linear-gradient(135deg, var(--red-2), var(--red-1));
	--color-text-featured: var(--color-accent-text);
	--featured-cols: 2;
	--featured-padding: 16px;

	/* SMALL ATHLETE IMAGE DIMENSIONS */
	--athlete-thumbnail-image-width: 60px;
	--athlete-thumbnail-image-height: 60px;
	--athlete-featured-thumbnail-image-width: 80px;
	--athlete-featured-thumbnail-image-height: 80px;

	/* STYLED SELECT MENU FOR FILTERS */
	--select-color-background: transparent;
	--select-input-height: 44px;
	--select-border-radius: 0;
	--select-carat-color: transparent;

	--checkbox-checked-fill: black;

	scroll-behavior: smooth;

	/* FUUW! */
	--background-color: var(--color-background);
	background: var(--color-background) !important;
	--theme-color: var(--color-accent);
}

#olympics-roster-2021 {
	position: relative;
}

#olympics-roster-2021 :is(h1, h2, h3, h4, h5, h6, ul li, p, span, button) {
	font-family: var(--fonts-sans-serif);
	line-height: 1.3em;
}

#olympics-roster-2021 p {
	/* Set fonts in an assertive way */
	font-size: var(--font-size-body);
}

/* Set the subheadline styles */
#olympics-roster-2021 .subheadline {
	font-size: 24px;
	text-transform: uppercase;
	margin: 0 0 1em 0;
}

/* Set the label w/ triangle styles */
#olympics-roster-2021 .label {
	font-size: var(--font-size-body);
}

#olympics-roster-2021 .label::before {
	content: "";
	display: inline-block;
	background: currentColor;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.25em;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

/* For when we want the triangle to be accent color */
#olympics-roster-2021 .label--accent::before {
	background: var(--color-accent);
}

html body.scroll-lock {
	overflow: hidden;
}
/* SIMPLE BUTTONS */

.plain-btn {
	border: none;
	font: italic 1em/1em var(--fonts-sans-serif);
	display: inline-block;
	min-height: var(--touch-target);
	border-radius: 0;
	background: transparent;
	box-sizing: border-box;
	padding: 0.5em 1em;
	cursor: pointer;
	transition: background 150ms ease;
}
.plain-btn:hover,
.plain-btn:focus {
	background: var(--gray-1);
}

.plain-btn:focus {
	outline: 1px solid var(--color-accent);
}

.plain-btn + .plain-btn {
	/* Add a margin when two or more buttons are up against each other */
	margin-left: 1em;
}

@media (pointer: coarse) {
	/* using touch - make buttons and other "touch targets" bigger */
	html body {
		--touch-target: 44px !important;
	}
}

@media all and (min-width: 768px) {
	html body {
		--featured-cols: 3;
	}
}
@media all and (min-width: 1024px) {
	html body {
		--touch-target: 30px;
		--featured-cols: 4;
	}
}